<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  .font{
    background:green;
    border-radius: 5px;
  }
  .warning{
    background:yellow;
    border-radius: 5px;
  }
   tbody tr:nth-child(even){
    background-color: #f2f2f2;
  }
   table{
     border-collapse: collapse;
   }
   td{
    height: 50px;
    margin: 0;
     padding: 0 5px;
    text-align: center;
  }
  #box3{
    width:500px;
  }
  a{
    text-decoration: none;
    background: red;
    border-radius: 5px;
    color: white;
    display: inline-block;
    padding: 7px 20px;
  }
</style>

<body>
<div class="container">
  <h3>学生信息</h3>
  说明：以下为2046级学生名单，共4人，<span class="font">成功加载3人</span>。<span class="warning">警告：列表不包含降级学生</span>。
  <table id="table">
    <tr id="box1">
      <th>#</th>
      <th>姓名</th>
      <th>班级</th>
      <th>Email</th>
      <th>操作</th>
    </tr>

    <tr id="box2">
      <td>1</td>
      <td>郭立新</td>
      <td>软件工程2046级1班</td>
      <td>guo@example.com</td>
      <td ><a href="#">修改</a> <a href="#">删除</a></td>
    </tr>

    <tr id="box3">
      <td>1</td>
      <td>黄英</td>
      <td>软件工程2046级1班</td>
      <td>haung@example.com</td>
      <td ><a href="#">修改</a> <a href="#">删除</a></td>
    </tr>
    <tr id="box4">
      <td>3</td>
      <td>吕惠玲</td>
      <td>软件工程2046级1班</td>
      <td>lv@example.com</td>
      <td ><a href="#">修改</a> <a href="#">删除</a></td>
    </tr>
  </table>
</div>
</body>
</html>